<template>
  <a-modal v-model:open="show" title="添加征信授权" width="60%" @ok="handleOk" @cancel="handleCancel">
    <a-tag color="#fdf6ec">
      <template #icon>
        <ExclamationCircleFilled style="color: #e6a23c" />
      </template>
      <span style="color: #e6a23c"> 上传身份证照片格式要求：最大支持4M，并且最长边不大于 4096，支持jpg/jpeg/png/bmp </span>
    </a-tag>
    <a-form ref="formRef" :model="formData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="" name="frontImageId" :wrapperCol="{ offset: 4, span: 18 }">
            <br />
            <IdUpload ref="frontUploadRef" style="height: 200rem" />
            <br />
            <p style="width: 100%; text-align: center">人像正面照</p>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="" name="backImageId" :wrapperCol="{ offset: 4, span: 18 }">
            <br />
            <IdUpload ref="backUploadRef" style="height: 200rem" />
            <br />
            <p style="width: 100%; text-align: center">国徽面照片</p>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="授权人姓名" name="name">
            <a-input v-model:value="formData.name" placeholder="请输入授权人姓名" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="证件类型" name="certType">
            <a-select placeholder="请选择证件类型" v-model:value="formData.certType">
              <a-select-option v-for="item in certType" :key="item.optionCode" :value="item.optionCode">{{ item.optionName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="证件号码" name="certNo"> <a-input v-model:value="formData.certNo" placeholder="请输入证件号码" /> </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="手机号" name="mobile"> <a-input v-model:value="formData.mobile" placeholder="请输入手机号" /> </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="授权角色" name="roleType">
            <a-select placeholder="请选择授权角色" v-model:value="formData.roleType" @change="onRoleTypeChange">
              <a-select-option v-for="item in roleType" :key="item.optionCode" :value="item.optionCode">{{ item.optionName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="征信查询原因" name="queryReason">
            <a-select placeholder="请输入征信查询原因" v-model:value="formData.queryReason" disabled>
              <a-select-option v-for="item in queryReason" :key="item.optionCode" :value="item.optionCode">{{ item.optionName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" name="remark"> <a-textarea :maxlength="120" showCount v-model:value="formData.remark" /> </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="正面照识别状态" name="frontImageStatus">
            <a-select v-model:value="formData.frontImageStatus" disabled>
              <a-select-option value="0">失败</a-select-option>
              <a-select-option value="1">成功</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="国徽面识别状态" name="backImageStatus">
            <a-select v-model:value="formData.backImageStatus" disabled>
              <a-select-option value="0">失败</a-select-option>
              <a-select-option value="1">成功</a-select-option>
            </a-select></a-form-item
          >
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue';
  import { ExclamationCircleFilled } from '@ant-design/icons-vue';
  import idCheck, { IDcode } from '../idCheck';
  import IdUpload from '/@/components/support/file-upload/idUpload.vue';
  import { message } from 'ant-design-vue';
  const prop = defineProps({
    certType: {
      type: Array,
      default: [],
    },
    roleType: {
      type: Array,
      default: [],
    },
    queryReason: {
      type: Array,
      default: [],
    },
  });
  const formRef = ref();
  const backUploadRef = ref();
  const frontUploadRef = ref();
  const labelCol = { style: { width: '100px' } };
  const wrapperCol = { span: 24 };
  const show = ref(false);
  const rules = {
    name: [{ required: true, message: '用户名称不能为空', trigger: 'change' }],
    type: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
    certNo: [{ required: true, validator: validateCertNo, trigger: 'change' }],
    mobile: [{ required: true, message: '请输入手机号', trigger: 'change' }],
    roleType: [{ required: true, message: '请选择授权角色', trigger: 'change' }],
    // queryReason: [{ required: true, message: '请选择征信查询原因', trigger: 'change' }],
  };
  const formData = ref({
    name: '',
    certType: 'ID_CARD',
    certNo: '',
    mobile: '',
    roleType: '',
    queryReason: '',
    remark: '',
    backImageStatus: '0',
    frontImageStatus: '0',
    frontImageId: '',
    backImageId: '',
    frontImageUrl: '',
    backImageUrl: '',
  });
  function handleOk(e) {
    formRef.value
      .validate()
      .then(() => {
        if (!formData.value.frontImageId) {
          message.error('请上传人像正面照照片！');
          return false;
        }
        if (!formData.value.backImageId) {
          message.error('请上传国徽面照片！');
          return false;
        }
        console.log('values', formData.value);
        show.value = false;
      })
      .catch((error) => {
        console.log('error', error);
      });
  }
  function open() {
    show.value = true;
    console.log(IDcode());
  }
  async function validateCertNo(_rule, value) {
    const res = IDcode(value);
    console.log(res);
    if (res.Status) {
      return Promise.resolve();
    } else {
      return Promise.reject(res.msg);
    }
  }

  function handleCancel() {
    frontUploadRef.value.clear();
    backUploadRef.value.clear();
    formRef.value.resetFields();
  }
  function onRoleTypeChange(e, a) {
    formData.value.queryReason = e;
  }
  defineExpose({ open });
</script>

<style></style>
